<template>
    <div class="box">
      <!-- 查询区域 -->
      <!-- <vxe-toolbar> -->
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 运单号 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="运单号" >
                <el-input v-model="form.name" placeholder="请输入主单号查询"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="发货人">
                <el-input v-model="form.name" placeholder="请输入货物名称"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="发货电话" >
                <el-input v-model="form.name" placeholder="请输入车牌号"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="发货地址" >
                <el-input v-model="form.name" placeholder="请输入车牌号"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 开单日期 -->
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="下单日期">
              <el-col :span="12">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="下单日期">
              <el-col :span="12">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col> -->
        </el-row>
        <!-- 结算部分 -->
        <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="收款支付方式" label-width="100px">
                  <el-select v-model="form.region" placeholder="--请选择--">
                    <el-option label="未支付" value="shanghai"></el-option>
                    <el-option label="在线支付" value="beijing"></el-option>
                    <el-option label="余额支付" value="shanghai"></el-option>
                    <el-option label="现金支付" value="beijing"></el-option>
                    <el-option label="暂不支付" value="shanghai"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="支付方式">
                    <el-select v-model="form.region" placeholder="--请选择--">
                        <el-option label="发货人现金支付" value="shanghai"></el-option>
                        <el-option label="收货人现金支付" value="beijing"></el-option>
                        <el-option label="发货人在线支付" value="shanghai"></el-option>
                        <el-option label="收货人在线支付" value="beijing"></el-option>
                        <el-option label="发货人月结" value="shanghai"></el-option>
                        <el-option label="收货人月结" value="shanghai"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
        </el-row>
        <!-- 查询功能 -->
        <el-row :gutter="20" type="flex">
            <el-col :span="14">
                <el-form-item>
                    <el-button type="primary" size="small" class="queryMainBtn">查询</el-button>
                  </el-form-item>
                </el-col> 
        </el-row>
      </el-form>

    <!-- </vxe-toolbar> -->
      <!-- 表格部分 -->   
      <vxe-table
        border
        resizable
        stripe
        highlight-hover-row
        highlight-current-row
        show-overflow
        ref="xTable"
        height="300"
        align="center"
        :data="tableData"
      >
        <vxe-table-column min-width="160" field="isDispatch" title="运单号"></vxe-table-column>
        <vxe-table-column min-width="160" field="gmtCreated" title="运单状态" sortable></vxe-table-column>
        <vxe-table-column min-width="160" field="reserveTime" title="运单图片" sortable></vxe-table-column>
        <vxe-table-column min-width="160" field="isReserve" title="下单时间" show-overflow></vxe-table-column>
        <vxe-table-column min-width="160" field="transportType" title="接货车牌"></vxe-table-column>
        <vxe-table-column min-width="160" field="detailStatus" title="货物名称"></vxe-table-column>
        <vxe-table-column min-width="160" field="mainOrderNumber" title="入驻商姓名"></vxe-table-column>
        <vxe-table-column min-width="160" field="cargoName" title="入驻商电话"></vxe-table-column>
        <vxe-table-column min-width="160" field="weight" title="发货方姓名"></vxe-table-column>
        <vxe-table-column min-width="160" field="shipmentName" title="发货方电话"></vxe-table-column>
        <vxe-table-column min-width="160" field="shipmentPhone" title="发货方地址"></vxe-table-column>
        <vxe-table-column min-width="160" field="loadingPeople" title="收货方地址">
                   
        </vxe-table-column>
        <vxe-table-column min-width="160" field="loadingPeoplePhone" title="收货方姓名"></vxe-table-column>
        <vxe-table-column min-width="160" field="loadingAddress" title="收货方地址"></vxe-table-column>
        <vxe-table-column min-width="160" field="deliveryAddress" title="装货日期"></vxe-table-column>
        <vxe-table-column min-width="160" field="upstreamCost" title="签收时间"></vxe-table-column>
        <vxe-table-column min-width="160" field="driverFreight" title="上游运费结算"></vxe-table-column>
        <vxe-table-column min-width="160" field="paymentType" title="司机运费"></vxe-table-column>
        <vxe-table-column min-width="160" field="collectionDelivery" title="代收款"></vxe-table-column>
        <vxe-table-column min-width="160" field="preciseModel" title="代收款结算"></vxe-table-column>
        <vxe-table-column min-width="160" field="vehicleType" title="银行"></vxe-table-column>
        <vxe-table-column min-width="160" field="dispatchBehavior" title="户口"></vxe-table-column>
        <vxe-table-column min-width="160" field="dispatchBehavior" title="银行账户"></vxe-table-column>
        <vxe-table-column min-width="450" title="操作" fixed="right">
        <template slot-scope="scope">
            <el-tag size="small" v-show="scope.row.buttons.modifyShow">结算记录</el-tag>
            <el-tag size="small" v-show="scope.row.buttons.orderShow" type="success">已结算</el-tag>
        </template>
        </vxe-table-column>
      </vxe-table>
      <!-- 派单功能对话框 -->
      <!-- <template>
        <dispatchOrder ref="dispOrder" />
      </template> -->
      
      <!-- 分页功能 -->
       <vxe-pager
        :loading="loading"
        :current-page.sync="listQuery.pageNum"
        :page-size.sync="listQuery.pageSize"
        :total="listQuery.total"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="handlePageChange"
      />
    </div>
  </template>
  
  <script>
  import Vue from "vue";
  import request from "@/utils/request";
  import "xe-utils";
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import VXETable from "vxe-table";
  import "vxe-table/lib/index.css";
  import { getDispathCarsList} from "@/api/ctms";
//   import dispatchOrder from './components/dispatchOrder.vue'
  
  Vue.use(VXETable,XEUtils,VXEUtils);
  
  export default {
    name:"dispatchCars",
    components: {
    //   dispatchOrder
    },
    created() {
      this.dispathCarsList()
    },
    data() {
      return {
        loading: false,
        form: {
          name: "",
          region: ""
        },
        tableData: [],
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
      };
    },
    methods: {
      // 获取派单列表
      dispathCarsList() {
          this.loading = true;
          return new Promise(resolve => {
            getDispathCarsList().then(response => {
              console.log(response);
              this.listQuery.total = response.data.total
              this.tableData = response.data.records
              // 判断表格操作 tag标签是否显示
              for(let item in this.tableData) {
                var buttons = {}
                var modifyShow = false //修改
                var orderShow = false  // 查看运单
                var dispatchShow = false  // 派单
                var cancelShow = false // 取消订单
                var recordShow = false  // 调单记录
                var lineShow = false //路线优化
                var changeShow = false  // 调单
                if(this.tableData[item].isReceive == 0) {
                  if(this.tableData[item].isDispatch != 1) {
                    modifyShow = true
                  }
                  orderShow = true
                  dispatchShow = true
                  cancelShow = true
                } else {
                    orderShow =true
                }
                if (this.tableData[item].isReceive == 1 && this.tableData[item].signCount == 0) {
                  changeShow = true
                }
                if(this.tableData[item].isArrive==0){
                    lineShow = true
                  } 
                if(this.tableData[item].isSingle == 1) {
                  recordShow = true
                }
               /*  if(userRole=="shipment"&&this.tableData[item].transportType == 1 && this.tableData[item].detailCount > 0 && this.tableData[item].isPayed == 0) {
                  运费支付
                }   */
                this.tableData[item]["buttons"] = {
                  modifyShow: modifyShow,
                  orderShow: orderShow,
                  dispatchShow:dispatchShow,
                  cancelShow:cancelShow,
                  changeShow:changeShow,
                  lineShow:lineShow,
                  recordShow:recordShow
                }
              }  
              this.loading = false;
            })
          })
      },
      // 派单对话框
      dispatchCars () {
        this.$refs.dispOrder.dispatchVisible = true
        this.$refs.dispOrder.driverList()
      },
      // 分页handle
      handlePageChange({ currentPage, pageSize }) {
        this.listQuery.pageNum = currentPage
        this.listQuery.pageSize = pageSize
        this.dispathCarsList() 
      },
    },
    
  }
  </script>
  
  <style lang="scss" scoped>
  .box {
    padding: 10px 10px 10px 0;
  }
  .queryMainBtn {
    width: 80px;
    margin: -5px 0 0 -50px;
    font-weight: bold;
  }
  
  </style>